<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryList" :inline="true" label-width="68px">
        <el-form-item label="客户编号">
          <el-input v-model="queryList.customerCode" placeholder="请输入客户编号">
          </el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="queryList.customerName" placeholder="请输入客户名称">
          </el-input>
        </el-form-item>
        <el-form-item label="助记码">
          <el-input v-model="queryList.mnemonicCode" placeholder="请输入助记码">
          </el-input>
        </el-form-item>
        <el-form-item>
           <el-button type="primary" icon="el-icon-plus" v-hasPermi="['basic:nccBasic:add']" @click="addDialog('add')">新增</el-button>
          <el-button type="primary" icon="el-icon-search"  @click="filterDire">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="clientList" border height="605px">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="customerCode" label="客户编码" align="center"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="businessScope" label="经营范围" align="center"></el-table-column>
        <el-table-column prop="contactPerson" label="联系人" align="center"></el-table-column>
        <el-table-column prop="contactPhone" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
        <el-table-column prop="shortName" label="简称" align="center"></el-table-column>
        <el-table-column prop="taxNo" label="税号" align="center"></el-table-column>
        <el-table-column prop="mnemonicCode" label="助记码" align="center"></el-table-column>
        <el-table-column prop="bankName" label="开户银行" align="center"></el-table-column>
        <el-table-column prop="bankAccount" label="银行账号" align="center"></el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch :value="scope.row.enableState" :active-value="'1'" :inactive-value="'0'" active-color="#13ce66"
                        inactive-color="#ff4949"
                       @change="toggleState(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="addDialog('edit',scope.row)"
            >详情
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete"
                       @click="deleteBtn(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total, prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryList.pageNum" :page-size="queryList.pageSize"
        :page-sizes="[10, 20, 50, 100]" :total="total">
      </el-pagination>
    </el-card>
    <clientAdd ref="clientAddRef" :visible.sync="visible" @addSuccess="addSuccess" />
  </div>
</template>

<script>
import clientAdd from "@/components/BasicInformation/client-add.vue"
import {
  deleteSupply,//删除
  nccBasicClientInfoFindList,
  statusSupplier,//修改状态
} from '@/api/basic/PersonnelInformation.js'
export default {
  components: {
    clientAdd
  },
  data() {
    return {
      queryList: {

      },
      clientList: [], //el-table数据
      total: 0,
      visible: false,
      loading: false
    };
  },
  created() {
    this.getNccClientList();
  },
  methods: {
    getNccClientList() {
      let params = {
        customerType: 1,
        ...this.queryList
      }
      nccBasicClientInfoFindList(params).then(response => {
        this.clientList = response.rows;
        this.total = response.total;
      });
    },
    //删除
    deleteBtn(row) {
      this.$confirm(`确认要进行删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSupply({id:row.id}).then(res => {
          this.$message.success(res.data.msg);
          this.getNccClientList();
        })
      }).catch(()=>{
        this.$message.info('已取消');
      })
    },
    //新增/修改后刷新列表
    addSuccess() {
      this.getNccClientList();
    },
    clearAll() {
      this.queryList = {};
      this.getNccClientList();
    },
    filterDire() {
      this.getNccClientList()
    },
    // 任务状态修改
    toggleState(row) {
      // 根据 enablestate 判断是启用还是停用
      let text = row.enableState === "0" ? "启用" : "停用";
      let query = {
        state: row.enableState === "1" ? "0" : "1",
        id: row.id
      };
      // 弹出确认框
      this.$confirm(`确认要${text}此项任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 更新状态
        statusSupplier(query).then(res => {
          // 显示成功消息
          this.$message({
            type: 'success',
            message: `${text}成功!` // 根据操作状态来动态显示消息
          });
          this.getNccClientList(); // 这里假设有一个方法用于刷新列表数据
        }).catch(error => {
          // 错误处理
          this.$message({
            type: 'error',
            message: `操作失败: ${error.message || '未知错误'}` // 显示错误消息
          });
        });
      }).catch(() => {
        // 用户取消了操作
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    addDialog(type, row) {
      this.visible = true;
      this.$refs.clientAddRef.openDialog(type, row);
    },
    handleSizeChange(newsize) {
      this.queryList.pageNum = 1
      this.queryList.pageSize = newsize
      this.getNccClientList()
    },
    handleCurrentChange(newpage) {
      this.queryList.pageNum = newpage
      this.getNccClientList()
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
